<template>
	<view class="box">
		<view class="personal-center">
			<!-- 个人信息 -->
			<view class="one">
				<image class="img" :src="userInfo.user_avatar | imgFormat" mode="" @click="clickAvatar"></image>
				<view class="nickname">{{ userInfo.user_name }}，欢迎进入！</view>
				<view class="news" @click="clickNews">
					<uni-icons type="email" size="24" color="#ffffff"></uni-icons>
					<view class="dot" v-if="hasNew"></view>
				</view>
			</view>
			<!-- 轮播 -->
			<view class="banner">
				<swiper class="swiper"
					indicator-dots
					autoplay
					circular
					:interval="5000"
					:duration="500"
					indicator-active-color="#457AFF"
					indicator-color="#ffffff"
				>
				    <swiper-item v-for="(item, index) in bannerList" :key="index">
				        <image class="img" :src="item.image_url | imgFormat" mode="" @click="clickImg(item)"></image>
				    </swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import { navList } from '@/mock/index/index.js';
	import { mapState } from 'vuex';
	export default {
		props: {
			bannerList: Array,
			hasNew: Boolean
		},
		data() {
			return {
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 点击轮播
			clickImg(item) {
				if (!item.image_jump) return;
				navList.forEach(i => {
					if (i.title === item.image_jump) {
						uni.navigateTo({
							url: i.url
						});
					}
				})
			},
			// 点击消息中心
			clickNews() {
				// this.$emit('update:hasNew', false)
				uni.navigateTo({
					url: '../../pages/messageCenter/messageCenter',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickAvatar() {
				uni.navigateTo({
					url: '/pages/personalcenter/index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height);
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 0;
		/* #endif */
		width: 750rpx;
		height: 225px;
		
		// padding-bottom: 10px;
		// margin-bottom: 20px;
		background-color: #FFFFFF;
		
		z-index: 1999;
	}
	.personal-center {
		width: 750rpx;
		height: 175px;
		box-sizing: border-box;
		padding: 20px 50rpx 0 50rpx;
		background: url(../../static/images/index/indexPersonalCenter.png) no-repeat;
		background-size: 100% 100%;
		.one {
			display: flex;
			align-items: center;
			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 40rpx;
			}
			.nickname {
				flex: 1;
				font-size: 16px;
				
				color: $uni-text-color;
			}
			.news {
				position: relative;
				.dot {
					position: absolute;
					top: -5rpx;
					right: -5rpx;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					
					background-color: #FF7543;
				}
			}
		}
		.banner {
			position: absolute;
			bottom: 10px;
			
			width: 650rpx;
			height: 125px;
			border-radius: 12rpx;
			overflow: hidden;
			.swiper {
				height: 125px;
				.img {
					width: 650rpx;
					height: 125px;
				}
			}
		}
	}
</style>
